<template>
  <div class="main-header" :class="{ 'to-top' : isHideSideBar}" v-cloak>
    <a href="javascript:;" class="logo">
      <div class="logo-box"><img src="../assets/img/carport_logo.png" alt=""></div>
    </a>
    <nav class="navbar">
      <a href="javascript:;" class="prev-item more-item" v-show="showPrevBtn" @click="clickPrevItem"><span class="more-menu-icon"></span></a>
      <div id="menu_box" class="menu-box">
        <div class="menu-inner-box" :style="menuStyle">
          <a class="menu-item" v-for="(item, index) in menuList.list" :key="index" :data-id="item.menuId" :class="index === menuList.active ? 'active' : ''" @click.prevent="clickOneMenu(index, item.childMenuList)">{{item.menuName}}</a>
        </div>
      </div>
      <a href="javascript:;" class="next-item more-item" v-show="showNextBtn" @click="clickNextItem"><span class="more-menu-icon"></span></a>
    </nav>
    <ul class="btnbar list-inline">
      <li class="btn-item">
        <a><i style="height: 24px;"></i>{{account}}</a>
      </li>
      <li class="btn-item dropdown">
        <a :class="{active: isShowUserInfo}" @click="isShowUserInfo = !isShowUserInfo"><i class="btnbar-icon user-icon"></i></a>
        <personal-info :is-show-user-info="isShowUserInfo"></personal-info>
      </li>
      <li class="btn-item">
        <a @click.prevent="toOpenModal('logout')"><i class="btnbar-icon sign-out-icon"></i></a>
      </li>
    </ul>
    <basic-modal ref="logout"
      title-txt="退出系统"
      body-txt="您确定要退出系统吗?"
      yes-txt="确定"
      cancel-txt="取消"
      v-on:confirm="confirmLogout">
    </basic-modal>
  </div>
</template>

<script>
let singleMenuW = 100;
import common from '../mixins/common.js'
import { mapGetters } from 'vuex'
import menuList from '../assets/js/menu.js'
import PersonalInfo from './head/PersonalInfo.vue'
import BasicModal from './widgets/BasicModal'
import invokeModal from '../mixins/modal/invokeModal.js'
import constans from '../assets/utils/Constans.js'
export default {
  mixins: [common, invokeModal],
  data() {
    return {
      account : '',
      showPrevBtn: false,
      showNextBtn: false,
      translateW: 0,
      menuStyle: {
        width: 'auto',
        transform: 'translate3d(0,0,0)'
      },
      isShowUserInfo: false
    }
  },
  components: {
    'personal-info': PersonalInfo,
    'basic-modal': BasicModal
  },
  computed: {
    ...mapGetters({
      isHideSideBar: 'getIsHideSideBar',
      menuList: 'getAllMenu'
    })
  },
  created() {
    let _this = this;
    let resizeTimer = null;
    this.getLoginUserName();
    this.getAllMenuFn(menuList);

    // this.getResources();

    $(window).on('resize',function(){
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function(){
        _this.initNav();
      },50);
    })

    $(document).on('click',function(e){
      let $Target = $(e.target);
      if($Target.closest('.dropdown').length > 0) {return;}
      _this.isShowUserInfo = false;
    })
  },
  mounted() {
    this.initNav();
  },
  methods: {
    getLoginUserName() {
      let self = this;
      this.$http.get(constans.getLoginUserName).then((response) => {
        var result = response.data;
        self.account = response.data.data;
      }, (response) => {
        self.showToast("服务器已关闭", 2, 1500);
      })
    },
    getAllMenuFn(menuLists) {
      let _first = this.menuList.active || 0;
      let allMenuList = menuLists && menuLists.length > 0 ? menuLists : [];
      let sideMenuList = allMenuList.length > 0 ? menuLists[_first].childMenuList : [];
      let initSideMenu = { list: sideMenuList, firstIndex: _first };
      this.$store.commit('SET_ALLMENU', { list: allMenuList, active: _first });
      this.$store.commit('SET_SIDEMENULIST', initSideMenu);
      this.initNav();
    },
    initNav() {
      let nav_wrapper_w = $('#menu_box').width();
      let nav_w = this.menuList.list.length * singleMenuW;
      if(nav_w > nav_wrapper_w) {
        this.showPrevBtn = false;
        this.showNextBtn = true;
        if(this.translateW < 0) {
          this.showPrevBtn = true;
        }
      }else{
        this.showPrevBtn = false;
        this.showNextBtn = false;
        if(this.translateW != 0) {
          this.translateW = 0;
          this.menuStyle.transform = 'translate3d(0,0,0)';
        }
      }

      this.menuStyle.width = nav_w + 'px';
    },
    clickOneMenu(index, children) {
      let sideMenu = {
        list: children || [],
        firstIndex: index
      };
      // this.activeMenu = index;
      this.$store.commit('SET_ALLMENU', {active: index});
      this.$store.commit('SET_SIDEMENULIST', sideMenu);
    },
    //菜单项往前移动一个
    clickPrevItem() {
      let translateW = this.translateW;
      let nav_len = this.menuList.list.length;
      let nav_wrapper_w = $('#menu_box').width();
      let nav_w = nav_len * singleMenuW;
      if(Math.abs(translateW) > 0){
        if(translateW + singleMenuW >= 0){
          translateW = 0;
          this.showPrevBtn = false;
          this.showNextBtn = true;
        }else{
          var reste = Math.abs(translateW) % singleMenuW;//如果当前视线范围内的第一个菜单不是完整显示的，则往后移动 宽度/单个菜单宽度的余数
          translateW += reste > 0 ? reste : singleMenuW;
          if(nav_wrapper_w + Math.abs(translateW) >= nav_w){
            this.showNextBtn = false;
          }else{
            this.showNextBtn = true;
          }
        }
        this.translateW = translateW;
        this.menuStyle.transform = 'translate3d(' + this.translateW + 'px, 0, 0)';
      }
    },
    //菜单项往后移动一个
    clickNextItem() {
      let nav_len = this.menuList.list.length;
      let nav_wrapper_w = $('#menu_box').width();
      let nav_w = nav_len * singleMenuW;
      let this_translateW = 0;

      if(nav_w > nav_wrapper_w){
        if(nav_wrapper_w + Math.abs(this.translateW) + singleMenuW >= nav_w){
          this_translateW = nav_wrapper_w + Math.abs(this.translateW) + singleMenuW - nav_w;
          this_translateW = singleMenuW - this_translateW;
          this.showNextBtn = false;
          this.translateW -= this_translateW;
        }else{
          this_translateW = singleMenuW;
          this.translateW -= singleMenuW;
        }
        this.menuStyle.transform = 'translate3d(' + this.translateW + 'px, 0, 0)';
        this.showPrevBtn = true;
      }
    },
    confirmLogout () {
      let self = this;
      this.$http.post(constans.logout).then((response) => {
        var result = response.data;
        if (result.messageCode === 200) {
          self.closed('logout');
          self.$router.push("/login");
        } else {
          self.showToast(result.message, 2, 1500);
        }
      }, (response) => {
        self.showToast("服务器已关闭", 2, 1500);
      })

    }
  }
}
</script>

<style lang="less" scoped>
@import "../assets/less/base/common.less";
@import "../assets/less/header.less";

</style>
